<script>
import TheWelcome from "../components/TheWelcome.vue";
import Product from "../components/Product.vue";
import products from "./product";
import { computed } from "@vue/runtime-core";

function getFilterArray(array) {
  const res = [];
  const json = {};
  for (let i = 0; i < array.length; i++) {
    const _self = array[i];
    if (!json[_self]) {
      res.push(_self);
      json[_self] = 1;
    }
  }
  return res;
}

export default {
  components: { Product, TheWelcome },

  data() {
    return {
      products: products,
      filterBrand: "",
      filterColor: "",
      order: "",
    };
  },
  computed: {
    filteredAndOrderedList() {
      let list = [...products];
      // 按品牌过滤
      if (this.filterBrand !== "") {
        list = list.filter((item) => item.brand === this.filterBrand);
      }
      // 按颜色过滤
      if (this.filterColor !== "") {
        list = list.filter((item) => item.color === this.filterColor);
      }
      // 排序
      if (this.order !== "") {
        if (this.order === "sales") {
          list = list.sort((a, b) => b.sales - a.sales);
        } else if (this.order === "cost-desc") {
          list = list.sort((a, b) => b.cost - a.cost);
        } else if (this.order === "cost-asc") {
          list = list.sort((a, b) => a.cost - b.cost);
        }
      }
      return list;
    },

    brands() {
      const brands = products.map((item) => item.brand);
      return getFilterArray(brands);
    },
    colors() {
      const colors = this.products.map((item) => item.color);
      return getFilterArray(colors);
    },
  },
  methods: {
    handleFilterBrand(brand) {
      if (this.filterBrand === brand) {
        this.filterBrand = "";
      } else {
        this.filterBrand = brand;
      }
    },
    handleFilterColor(color) {
      if (this.filterColor === color) {
        this.filterColor = "";
      } else {
        this.filterColor = color;
      }
    },
    handleOrderDefault() {
      this.order = "";
    },
    handleOrderSales() {
      this.order = "sales";
    },
    handleOrderCost() {
      if (this.order === "cost-desc") {
        this.order = "cost-asc";
      } else {
        this.order = "cost-desc";
      }
    },
  },
};
</script>

<template>
  <main>
    <div class="list-control">
      <div class="list-control-filter">
        <span>品牌：</span>
        <span
          class="list-control-filter-item"
          :class="{ on: item === filterBrand }"
          v-for="item in brands" :key="item"
          @click="handleFilterBrand(item)"
          >{{ item }}</span
        >
      </div>
      <div class="list-control-filter">
        <span>颜色：</span>
        <span
          class="list-control-filter-item"
          :class="{ on: item === filterColor }"
          v-for="item in colors" :key="item"
          @click="handleFilterColor(item)"
          >{{ item }}</span
        >
      </div>
      <div class="list-control-order">
        <span>排序：</span>
        <span
          class="list-control-order-item"
          :class="{ on: order === '' }"
          @click="handleOrderDefault"
          >默认</span
        >
        <span
          class="list-control-order-item"
          :class="{ on: order === 'sales' }"
          @click="handleOrderSales"
        >
          销量
          <template v-if="order === 'sales'">↓</template>
        </span>
        <span
          class="list-control-order-item"
          :class="{ on: order.indexOf('cost') > -1 }"
          @click="handleOrderCost"
        >
          价格
          <template v-if="order === 'cost-asc'">↑</template>
          <template v-if="order === 'cost-desc'">↓</template>
        </span>
      </div>
    </div>

    <product
      :info="item"
      v-for="item in filteredAndOrderedList"
      :key="item.id"
    />


  </main>
</template>

<style scoped>
    .list-control{
        background: #fff;
        border-radius: 6px;
        margin: 16px;
        padding: 16px;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
    }
    .list-control-filter{
        margin-bottom: 16px;
    }
    .list-control-filter-item,
    .list-control-order-item {
        cursor: pointer;
        display: inline-block;
        border: 1px solid #e9eaec;
        border-radius: 4px;
        margin-right: 6px;
        padding: 2px 6px;
    }
    .list-control-filter-item.on,
    .list-control-order-item.on{
        background: #f2352e;
        border: 1px solid #f2352e;
        color: #fff;
    }
    .product-not-found{
        text-align: center;
        padding: 32px;
    }
</style>
